<template>
  <div class="app-container djryView">
    <el-form ref="form" :model="form" :rules="rules">
      <BorderView title="基本情况" />
      <el-descriptions :column="3" border>
        <el-descriptions-item
          label="所属地区*"
          :span="3"
          label-class-name="labelBg"
        >
          <el-form-item prop="area">
            <template v-if="$route.query.chdjId">
              <area-cascader v-if="form.area" v-model="form.area" />
            </template>
            <template v-else>
              <area-cascader v-model="form.area" />
            </template>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label="姓名*" label-class-name="labelBg">
          <el-form-item prop="name">
            <el-input v-model="form.name" placeholder="请输入姓名" />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item
          label="头像"
          label-class-name="labelBg"
          :span="1"
        >
          <imageUpload v-model="form.avatar" list-type="text" :limit="1" />
        </el-descriptions-item>
        <el-descriptions-item label="性别*" label-class-name="labelBg">
          <el-form-item prop="gender">
            <el-select
              v-model="form.gender"
              placeholder="请选择性别"
              style="width: 100%"
            >
              <el-option
                v-for="dict in dict.type.gender"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label="民族*" label-class-name="labelBg">
          <el-form-item prop="mz">
            <el-input v-model="form.mz" placeholder="请输入民族" />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label="政治面貌*" label-class-name="labelBg">
          <el-form-item prop="zzmm">
            <el-select
              v-model="form.zzmm"
              placeholder="请选择政治面貌"
              style="width: 100%"
            >
              <el-option
                v-for="dict in dict.type.zzmm"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label="身高(cm)*" label-class-name="labelBg">
          <el-form-item prop="height">
            <el-input
              v-model="form.height"
              placeholder="请输入整数"
              type="number"
            />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label="身份证号码*" label-class-name="labelBg">
          <el-form-item prop="idno">
            <el-input v-model="form.idno" placeholder="请输入身份证号码" />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label="出生日期*" label-class-name="labelBg">
          <el-form-item label="" prop="birthday">
            <el-date-picker
              v-model="form.birthday"
              clearable
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="请选择出生日期"
              style="width: 100%"
            />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label="文化程度*" label-class-name="labelBg">
          <el-form-item prop="whcd">
            <el-select
              v-model="form.whcd"
              placeholder="请选择文化程度"
              style="width: 100%"
            >
              <el-option
                v-for="dict in dict.type.whcd"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label="决定机关*" label-class-name="labelBg">
          <el-form-item prop="jdjg">
            <el-input v-model="form.jdjg" placeholder="请输入决定机关" />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label="登记时间*" label-class-name="labelBg">
          <el-form-item label="" prop="djsj">
            <el-date-picker
              v-model="form.djsj"
              clearable
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="请选择决定时间"
              style="width: 100%"
            />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label="负责人*" label-class-name="labelBg">
          <el-form-item label="" prop="fzr">
            <user-member-select v-model="form.fzr" placeholder="请选择负责人"/>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label="所属警务区*" label-class-name="labelBg">
          <el-form-item prop="ssjwq">
            <el-input v-model="form.ssjwq" placeholder="请输入所属警务区" />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label="户籍地派出所*" label-class-name="labelBg">
          <el-form-item label="" prop="hjdpcs">
            <el-input v-model="form.hjdpcs" placeholder="请输入户籍地派出所" />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label="户籍地*" label-class-name="labelBg">
          <el-form-item label="" prop="hjd">
            <el-input v-model="form.hjd" placeholder="请输入户籍地" />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label="户籍地详址*" label-class-name="labelBg">
          <el-form-item prop="hjdxz">
            <el-input v-model="form.hjdxz" placeholder="请输入户籍地详址" />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label="居住地派出所*" label-class-name="labelBg">
          <el-form-item prop="jzdpcs">
            <el-input v-model="form.jzdpcs" placeholder="请输入居住地派出所" />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label="居住地*" label-class-name="labelBg">
          <el-form-item prop="jzd">
            <el-input v-model="form.jzd" placeholder="请输入居住地" />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label="居住地详址*" label-class-name="labelBg">
          <el-form-item prop="jzdxz">
            <el-input v-model="form.jzdxz" placeholder="请输入居住地详址" />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label="就业情况*" label-class-name="labelBg">
          <el-form-item prop="jyqk">
            <el-select
              v-model="form.jyqk"
              placeholder="请选择就业情况"
              style="width: 100%"
            >
              <el-option
                v-for="dict in dict.type.jyqk"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label="固定电话*" label-class-name="labelBg">
          <el-form-item label="" prop="gddh">
            <el-input v-model="form.gddh" placeholder="请输入固定电话" />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label="移动电话*" label-class-name="labelBg">
          <el-form-item label="" prop="mobile">
            <el-input v-model="form.mobile" placeholder="请输入移动电话" />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label="婚姻状况*" label-class-name="labelBg">
          <el-form-item label="" prop="hyzk">
            <el-select
              v-model="form.hyzk"
              placeholder="请选择婚姻状况"
              style="width: 100%"
            >
              <el-option
                v-for="dict in dict.type.hyzk"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label="目前状况" label-class-name="labelBg">
          <el-form-item label="" prop="mqzt">
            <el-select
              v-model="form.mqzt"
              placeholder="请选择目前状态"
              style="width: 100%"
            >
              <el-option
                v-for="dict in dict.type.mqgzzt"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item
          label="是否与父母居住*"
          :span="3"
          label-class-name="labelBg"
        >
          <el-form-item label="" prop="sfyfmzj">
            <el-select
              v-model="form.sfyfmzj"
              placeholder="请选择是否与父母居住"
              style="width: 100%"
            >
              <el-option
                v-for="dict in dict.type.sys_yes_no"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item
          label="滥用毒品类型*"
          :span="3"
          label-class-name="labelBg"
        >
          <el-form-item prop="lydplxList">
            <el-checkbox-group v-model="form.lydplxList">
              <el-checkbox
                v-for="(item, index) in dict.type.lydplx"
                :key="index"
                :label="item.value"
              >{{ item.label }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item
          label="技能特长*"
          :span="3"
          label-class-name="labelBg"
        >
          <el-form-item prop="jntcList">
            <el-checkbox-group v-model="form.jntcList">
              <el-checkbox
                v-for="(item, index) in dict.type.jntc"
                :key="index"
                :label="item.value"
              >
                {{ item.label }}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-descriptions-item>
      </el-descriptions>

      <ResultEl :type-id="form.id" />
      <BorderView title="违法行为报告*" />
      <el-form-item prop="wfxwbg" style="margin-top: 20px">
        <fileUpload v-model="form.wfxwbg" />
      </el-form-item>
    </el-form>
    <div
      slot="footer"
      class="dialog-footer"
      style="text-align: right; margin-top: 20px"
    >
      <el-button @click="cancel">重置</el-button>
      <el-button
        :loading="buttonLoading"
        type="primary"
        @click="submitForm"
      >保存</el-button>
    </div>
  </div>
</template>
<script>
import ResultEl from './resultSeizure'
import BorderView from '@/views/components/BorderTitleView/index.vue'
import { getUser, addUser, updateUser } from '@/api/user/userInfo'

export default {
  dicts: [
    'hyzk',
    'mqgzzt',
    'whcd',
    'lydplx',
    'sys_yes_no',
    'gender',
    'fxdj',
    'jntc',
    'jyqk',
    'zzmm'
  ],
  components: {
    BorderView,
    ResultEl
  },
  data() {
    return {
      chdjId: '',
      colSize: 6,
      // 按钮loading
      buttonLoading: false,
      // 表单参数
      form: {
        type: '18',
        lydpzlList: [],
        jntcList: [],
        lydplxList:[]
      },
      // 表单校验
      rules: {
        area: [
          { required: true, message: '所属地区不能为空', trigger: 'blur' }
        ],
        name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
        gender: [{ required: true, message: '性别不能为空', trigger: 'blur' }],
        mz: [{ required: true, message: '民族不能为空', trigger: 'blur' }],
        zzmm: [
          { required: true, message: '政治面貌不能为空', trigger: 'blur' }
        ],
        height: [{ required: true, message: '身高不能为空', trigger: 'blur' }],
        idno: [
          { required: true, message: '身份证号码不能为空', trigger: 'blur' }
        ],
        birthday: [
          { required: true, message: '出生日期不能为空', trigger: 'blur' }
        ],
        whcd: [
          { required: true, message: '文化程度不能为空', trigger: 'blur' }
        ],
        jdjg: [
          { required: true, message: '决定机关不能为空', trigger: 'blur' }
        ],
        djsj: [
          { required: true, message: '登记时间不能为空', trigger: 'blur' }
        ],
        ssjwq: [
          { required: true, message: '所属警务区不能为空', trigger: 'blur' }
        ],
        hjdpcs: [
          { required: true, message: '户籍地派出所不能为空', trigger: 'blur' }
        ],
        hjd: [{ required: true, message: '户籍地不能为空', trigger: 'blur' }],
        hjdxz: [
          { required: true, message: '户籍地详址不能为空', trigger: 'blur' }
        ],
        jzdpcs: [
          { required: true, message: '居住地派出所不能为空', trigger: 'blur' }
        ],
        jzd: [{ required: true, message: '居住地不能为空', trigger: 'blur' }],
        jzdxz: [
          { required: true, message: '居住地详址不能为空', trigger: 'blur' }
        ],
        jyqk: [
          { required: true, message: '就业情况不能为空', trigger: 'blur' }
        ],
        gddh: [
          { required: true, message: '固定电话不能为空', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '本人移动电话不能为空', trigger: 'blur' },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ],
        hyzk: [
          { required: true, message: '婚姻状况不能为空', trigger: 'blur' }
        ],
        mqzk: [
          { required: true, message: '目前状况不能为空', trigger: 'blur' }
        ],
        fzr: [
          { required: true, message: '负责人不能为空', trigger: 'blur' }
        ],
        sfyfmzj: [
          {
            required: true,
            message: '是否与父母同住不能为空',
            trigger: 'blur'
          }
        ],
        lydplxList: [
          { required: true, message: '滥用毒品种类不能为空', trigger: 'blur' }
        ],
        jntcList: [
          { required: true, message: '技能不能为空', trigger: 'blur' }
        ],
        wfxwbg: [
          { required: true, message: '违法行为报告不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    chdjId: {
      immediate: true,
      handler(newV) {
        if (newV) {
          getUser(newV).then((res) => {
            if (res.data) {
              this.form = res.data
            } else {
              this.reset()
            }
          })
        }
      }
    }
  },
  mounted() {
    this.chdjId = this.$route.query.chdjId
  },
  methods: {
    submitForm() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.buttonLoading = true
          if (this.form.id != null) {
            updateUser(this.form)
              .then((response) => {
                this.$modal.msgSuccess('修改成功')
              })
              .finally(() => {
                this.buttonLoading = false
              })
          } else {
            addUser(this.form)
              .then((response) => {
                this.$modal.msgSuccess('新增成功')
                this.$router.replace({
                  path: '/user/chdj-detail/index',
                  query: { chdjId: response.data.id }
                })
                this.chdjId = response.data.id
              })
              .finally(() => {
                this.buttonLoading = false
              })
          }
        }
      })
    },
    // 取消按钮
    cancel() {
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        area: undefined,
        name: undefined,
        gender: undefined,
        mz: undefined,
        zzmm: undefined,
        height: undefined,
        idno: undefined,
        birthday: undefined,
        whcd: undefined,
        jdjg: undefined,
        djsj: undefined,
        ssjwq: undefined,
        hjdpcs: undefined,
        hjd: undefined,
        hjdxz: undefined,
        jzdpcs: undefined,
        jzd: undefined,
        fzr: undefined,
        jzdxz: undefined,
        jyqk: undefined,
        gddh: undefined,
        bryddh: undefined,
        hyzk: undefined,
        mqzk: undefined,
        sfyfmtz: undefined,
        lydpzlList: [],
        jntcList: [],
        lydplxList:[],
        wfxwbg: undefined
      }
      this.resetForm('form')
    }
  }
}
</script>
<style lang="scss">
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 16px;
  color: #8c939d;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
}
.avatar {
  width: 40px;
  height: 40px;
  display: block;
}
</style>
<style>
.labelBg {
  background: rgb(241, 243, 244) !important;
  color: #000 !important;
  width: 200px;
}
</style>
<style scoped>
.djryView .el-input__wrapper {
  border: none !important;
  box-shadow: none !important;
  padding: 0px;
}
.djryView /deep/ .el-input__inner {
  border: none !important;
}
.djryView /deep/ .el-form-item {
  margin-bottom: 0;
}
</style>
